La información de autor en el post-footer parece que se puso de moda, algunos blogs ya lo mostraban hace tiempo y cada vez son más las plantillas para descargar personalizadas con los datos de autor.

En mi blog de pruebas lo tenía añadido y leyendo a Rosa quise comprobar el resultado cuando escribe más de un autor. Para empezar nada mejor que hacerlo por el principio.

Suprimimos el nombre de autor del post-footer.
No tiene sentido añadir los datos de autor y mostrar también el nombre de autor al final de las entradas, así que desactivaremos la casilla de "Publicado por" en Diseño/Entradas del blog/Editar/ guardamos los cambios y con eso no se mostrará el nombre de autor. Si por cualquier causa se resiste en la siguiente entrada veremos como eliminar esa parte desde la plantilla.

Información de autor con enlaces.
Añadimos los estilos para conseguir algo similar a la siguiente imagen:


Justo antes de ]]></b:skin> añadimos:

.datos-autor { /* contenedor información  */
-moz-border-radius:5px;
background-color:#884062; /* color de fondo contenido */
border-color:#000; /* color borde */
border-style:solid;
border-width:1px;
margin-top:-30px;
margin-bottom:40px;
padding:5px;
}
.avatar-img img { /* imagen avatar */
-moz-border-radius:5px;
background-color:#000; /* color fondo */
float:left;
margin-right:10px;
margin-top:20px; }
.info-autor { /* texto información */
color:#fff; /* color texto */
font-size:12px;
line-height:1.4em;
margin-left:5px;
padding-right:5px;
text-transform:none;margin-bottom:15px;
}
.info-autor h3 { color:#eee !important; /* color título */
font-size:17px; /* tamaño de fuente */
font-weight:bold;
margin-left:50px;
margin-top:5px;
text-shadow:0px 1px 0 #000; /* sombra  texto */
text-transform:none;
}
.info-autor a:link, .texto-autor a:visited { /* estilos enlaces */
-moz-border-radius:
5px;background-color:#ccc; /* fondo enlaces */
border:1px solid #000; /* borde color */
color:#000; /* color texto */
font-size:12px; /* tamaño fuente */
line-height:2.2em;
font-weight:bold;
padding:0 6px 0 7px;
text-shadow:1px 1px 0 #676767;
text-transform:none;
}
.info-autor a:hover { /* efecto hover enlaces */
color:#ccc;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0 #000;
}

Escogemos el lugar para mostrar la información.
La información de autor la podemos añadir justo antes de los datos del post-footer (número de comentarios, etiquetas) para ubicar esa parte marcamos para expandir la plantilla y buscamos:
<div class='post-footer'>
o puede que lo tengamos definido de esta otra forma:
<div id='post-footer'>

Si por el contrario deseamos mostrar la información justo después de los datos de post-footer buscaremos:
<div class='post-footer-line post-footer-line-3'>
En algunos casos puede que tengamos una cuarta línea:
<div class='post-footer-line post-footer-line-4'>
También puede que lo tengamos definido así:
<p class='post-footer-line post-footer-line-3'>

Buscamos esa parte donde vamos a mostrar la información, por ejemplo después de los datos del post-footer. Buscamos:
<div class='post-footer-line post-footer-line-3'>
a continuación de esa línea puede que tengamos los iconos a redes sociales proporcionados por Blogger o el sistema de valoración, seguiremos un poco más abajo hasta localizar </b:includable> y justo antes añadimos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nombre-autor&quot;'>
<div class='datos-autor'>
<div class='avatar-img'><img alt='' height='70' src='url-avatar' width='55'/>
</div>
<div class='info-autor'>
<h3>Título (Sobre autor)</h3>
<div align='justify'>
<p>Información de autor</p>
<p>Links: <span class='link-autor'>
<a href='Url-enlace1' target='_blank'>Enlace1</a>
<a href='Url-enlace2' target='_blank'>Enlace2</a>
<a href='Url-enlace3' target='_blank'>Enlace3</a>
</span></p>
</div></div></div>
</b:if></b:if>

Si deseamos que la información se muestre en la página principal en lugar de las páginas individuales eliminaremos la primera línea:
<b:if cond='data:blog.pageType == &quot;item&quot;'> y la última </b:if>

Con eso ya tenemos lista la información en el blog pero podemos seguir jugando y añadir en lugar de los enlaces iconos a redes sociales:

Información de autor con iconos a redes sociales.




Antes de ]]></b:skin>

.datos-autor {
-moz-border-radius:5px;
background: #000 url(url-imagen-de-fondo) repeat scroll top left;
border-color:#868686; /* borde color */
border-style:solid;
border-width:1px;margin:0 2px 5px 0;
padding: 5px 10px 15px;}
.avatar-img img {
-moz-border-radius:5px;
background-color:#333; /* avatar color de fondo*/
float:left;
margin-right:10px;
margin-top:10px;
}
.info-autor {
color:#ccc; /* color texto información */
font-size:12px;
line-height:1.4em;
margin-left:5px;
padding-right:5px;
text-transform:none;
margin-bottom:15px;
}
.info-autor h3 {
color:#7DDEED !important; /* color título */
font-size:17px; /* tamaño fuente */
font-weight:bold;
margin-bottom:15px;
margin-left:90px;
margin-top:-5px;
text-shadow:1px 1px 0 #000;
text-transform:none;
}

Ahora buscamos:
<div class='post-footer-line post-footer-line-3'>
y justo después añadiremos:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nombre-autor&quot;'>
<div class='datos-autor'>
<div class='avatar-img'><img alt='' height='70' src='url-avatar' width='55'/>
</div>
<div class='info-autor'>
<h3>Título (Sobre autor)</h3>
<div align='justify'>
<p>Información de autor</p>
<span style='float: right; margin: -5px -3px 30px 0;'>
<a class='feed' href='http://feeds2.feedburner.com/nombre' rel='nofollow' target='_blank'><img src='url-imagen' width='20'/></a>
<a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank'><img src='url-imagen' width='20'/></a>
</span>
</div></div></div>
</b:if></b:if>

(La siguiente entrada nos será útil para añadir los enlaces a redes sociales)

Información para varios autores.
Por último la idea que Rosa aporta y es la posibilidad de mostrar información para distintos autores, para que eso ocurra bastará con repetir el código de un sólo autor tantas veces como autores escriban en el blog añadiendo cada uno el nombre de autor que tiene en la configuración del blog y sustituir la url dela imagen según corresponda a cada autor.:
<b:if cond='data:post.author == &quot;Nombre-autor&quot;'>

MexaaC

GEM@, cuando leí el titulo no me lo podía creer.
Ayer estaba pensando si se podía realizar esto en blogger, porque en wordpress lo he visto, y muchos blogs de wordpress los envidio por eso, pero me quedo con blogger :D y ahora con esto me quedo más asombrado, espero poder entenderlo, trataré de leer paso a paso el de varios autores para poder utilizarlo bien :D
Gracias, luego te aviso como me fué.

Responder
MexaaC

Me sirvió de maravilla, solo me falta agregar la información de los demás autores, GRACIAS :D

Responder
Gem@

:: N.G. - C.W. pues yo le quitaría en valor negativo a datos autor, y en lugar de margin-top:-30px probaría con margin-top:10px porque en Firefox se muestra la información de autor ocultando parte de las entradas relacionadas con miniaturas. Compruébalo o pregunta a algún amigo como lo ve ;)

Responder
Unknown

A la perinola, vengo bajando despacito...:0 encontrarse con Napoléon no es de todos los días!

Lo tengo implementado 'a mi manera', sospecho que de aquí sacaré buenas ideas.

Besitos Piedra Preciosa :D

Responder
Gem@

:: Descubre Irlanda Bienvenidos a Gem@ BLOG!!

:: Hola Graciela :) la información de autor estilo Graciela está muy bien, nuestro asesor siempre dice que si algo funciona no lo toquemos así que experimenta lo que quieras y toma ideas pero no toques nada :D :D

Responder
Unknown

Es una lástima que hoy no haya preparado un pastel :$, le estaremos pagando poco sueldo :0

Responder
Gem@

:: Graciela jajajajaja y tan poco jajajajaja

Responder
Unknown

En cuanto nos descubra hablando sobre él 'nos corta el rostro': quitar la buena onda, se niega a compartir' :P

Responder
Kas-Tro

cuando puedas chekea hice todo como tal explicaste en el post y no aparece nada en mi blog de prueba http://prueba2056.blogspot.com/

Responder
Gem@

:: Kas-Tr las capturas están tomadas del ejemplo y funciona perfectamente, comprueba de nuevo que los pasos son los mismos :S

Responder
Kas-Tro

lo hice igual otra vez y nada..ve aver si me puedes ayudar que quiero ver si consigo ese efecto para y alanzar mi nueva plantilla

Responder
Gem@

:: Kas-Tro hay partes de la plantilla que por el código fuente no se pueden visualizar, los estilos están bien luego, el error debe estar cuando escoges el lugar donde vas a mostrar la información.

Responder
Antonio Ruiz

Hola Gema.

Desde hace unas semanas el icono de mi perfil no sale ni mi blog ni en otros (por ejemplo en este tuyo) cuando hago un comentario. Sin embargo sí sale en otros blogs. ¿Sabes a qué puede deberse? Habré tocado algo, tal vez al cambiar la imagen que tenía subida en google. Pero no entiendo porqué en unos blogs sí y en otros no.

Por cierto, no sé si es este el post adecuado para hacerte esta consulta. Si acaso dime dónde quieres que lo escriba.

Gracias.

Responder
Gem@

:: No sabría decirte Antonio, lo más frecuente es que la url esté rota, el servidor esté caído o ya no existe la imagen. Intenta subir las imágenes a Blogger o a Picasa directamente es lo más efectivo para que se muestren siempre las imágenes al menos en Blogger.

Responder
Antonio Ruiz

Gracias Gema.

He subido la imagen a Blogger y ya está solucionado para los nuevos comentarios. Eso sí, y no sé si es porque es así o no, pero los antigüos comentarios míos no aparecen con el icono.

Saludos y gracias nuevamente.

Responder
Gem@

:: Eso es así Antonio, es decir no debería ser porque Blogger no actualiza el avatar del perfil, no sé si te has dado cuenta que en algunos comentarios de mi blog tengo distinto avatar, eso se debe a que almacena la imagen con la fecha que se está usando y si cambiamos de avatar se muestra el actual pero no cambia el de fechas anteriores y se sigue mostrando el que había en la fecha de ese comentario.
También puede ser que según que blogs el autor tenga modificado la parte de comentarios de forma que muestra un avatar para los que comenten con nombre/url o para los anónimos y otro distinto el de cada uno para los que comentan con el perfil disponible siempre y cuando tengan imagen de perfil claro.

Responder
Anónimo

Gem@,se puede poner cuando este la entrada en una sola pagina?Y tambien se puede poner la segunda pero sin redes sociales?Gracias!!

Responder
Gem@

:: Jaled en una sola página quieres decir que se visualice la entrada completa? es así como viene explicado, los iconos a redes sociales los puedes suprimir eliminando la parte de la etiqueta span:
<span style='float: right; margin: -5px -3px 30px 0;'>
<a class='feed' href='http://feeds2.feedburner.com/nombre' rel='nofollow' target='_blank'><img src='url-imagen' width='20'/></a>
<a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank'><img src='url-imagen' width='20'/></a>
</span>

Responder
Anónimo

Ah y otra cosa Gem@.El fondo de la segunda viene puesto?

Responder
Anónimo

Si no me das el link por favor?

Responder
Gem@

:: Son los mismos sólo cambia el color de fondo y el borde de la imagen :)

Responder
Anónimo

Ok.....Mira como me salio,no tan bien....
http://img132.imageshack.us/img132/945/screenshot005i.png
PD:No tan bonito como el tuyo.:(

Responder
Gem@

:: Yo si lo veo bien, es cuestión de gustos y de jugar con los colores, estuve jugando con los tuyos y mira lo que salió:

http://img63.xooimage.com/files/8/6/d/3-2-2011-16.2.12-1-252fbdc.jpg

Responder
Anónimo

o_O ESTA GENIAL!!!Como demonios lo hiciste,me lo puedes explicar???

Responder
Gem@

:: Igual que tú pero con otros colores, para el fondo #013600 para el autor y el texto con #30AC30 :)

Responder
Anónimo

OK ya lo mejore mas....Pero no se hacer el borde alrededor del avatar y poner un color de ese fondo que viene en la entrada,porque me parece muy bonito y pega con el diseño de mi blog.....

Responder
Gem@

:: Prueba cambiando lo que tienes en datos autor y avatar por estos estilos:

.datos-autor {
-moz-border-radius: 5px 5px 5px 5px;
background: url("http://www.blogblog.com/images/spacer.gif") repeat scroll left top #000000;
border: 1px solid #868686;
margin: 10px 2px 5px 0;
padding: 15px 10px 15px;
}

.avatar-img img {
-moz-border-radius: 5px 5px 5px 5px;
background-color: #66FF00;
float: left;
margin: 10px ;
border: 1px solid #66FF00;
padding: 1px
}

Responder
Anónimo

Que te parece ahora,Gem@?
http://img84.imageshack.us/img84/4615/screenshot001rq.png

Responder
Anónimo

Solo necesito los bordes redondeados del cuadro y del avatar :D

Responder
Gem@

:: Los bordes redondeados se crean con moz-border-radius, pero para que se vean hay que añadir padding eso deja un espacio entre la imagen y el borde y de esa forma se ve el fondo de color verde :)

.avatar-img img {
-moz-border-radius: 6px 6px 6px 6px;
background-color: #66FF00;
float: left;
margin-right: 10px;
margin-top: 10px;
padding: 3px;
}

Responder
Mujeres o Demonios

Hola Gemma soy Mimi de Tierra del Fuego Argentina, quería agradecerte por todo lo que aprendo de tus post empece sin saber nada y gracias a tu info he ido avanzando mucho.
Tengo un problema estoy armando un blog para mi radio Vídeo online y quiero que sea estático osea solo he publicado los gadget y no quiero hacer ninguna entrada en el blog pero aparece el cartel que dice "No hay ninguna entrada." habrá posibilidad de sacar este cartel del html ?
dejo dire Gracias.

http://unikaonline.blogspot.com/

Responder
Gem@

:: Hola Mimi en la siguiente entrada puedes ver la forma de eliminarlo ;)
http://gemablog-.blogspot.com/2007/05/eliminar-cartel-para-mostrar-todas-las.html

Responder
Mujeres o Demonios

Gema Lo saqueeee!!!! muchas gracias sos una genia.
Mimi.

Responder
Gem@

:: Estupendo!!

Responder
Fernando_Miranda

No esta muy clara la forma en que explicas este post. Pero gracias seguire buscando.

Responder
Gem@

:: Fherguzon Fletcher aunque amanezca para todos cada uno verá un azul distinto en el cielo :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top